@import './colors';
@import './mixins';

.verses {
  font-family: 'LXGW WenKai';
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50vw;
  text-align: center;
  opacity: 0.8;
  word-break: keep-all;
  #verses-content {
    font-size: calc(30px + 1vw);
    width: 80vw;
  }
  #verses-origin {
    display: flex;
    margin-top: 1em;
    font-size: calc(10px + 1vw);
    justify-content: center;
    align-items: center;
    .stamp {
      color: $white;
      background-color: $dark-red;
      border-radius: 3px;
      padding: 3px 4px 3px 3px;
      margin: 0.5em;
      font-size: 67%;
      letter-spacing: -1px;
    }
  }
}

.verses.horizontal {
  transition: top 500ms ease-in-out;
  @include fadein(horizontalFadein);
}

.verses.vertical {
  text-align: left;
  top: 50vh;
  transform: translate(-50%, -80%);
  writing-mode: vertical-rl;
  @include fadein(verticalFadein);

  #verses-content {
    width: auto;
    line-height: 1.35;
  }
  #verses-origin {
    margin: 0;
    margin-right: 10px;
    justify-content: flex-start;
    flex-wrap: wrap;
    word-break: keep-all;
    .stamp {
      padding: 3px 2px 4px;
    }
  }
}

#verses-origin:hover .origin-search-icon {
  opacity: 0.5;
}

.origin-search-icon {
  opacity: 0;
  transition: all 200ms ease-in;
}
